<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}

			/* 大盒子 */
			#addtableone {

				width: 90%;
				/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-top: 20px;
			}

			#header {
				top: 0px;
				background-color: white;
				position: sticky;
				z-index: 5;
			}

			#header #left {
				height: 80px;
				line-height: 80px;
				text-indent: 12px;

			}

			#header #right {
				height: 80px;

				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}

			#hr1 {

				/* width:98%;
				margin: 0 auto; */
				color: whitesmoke;
				margin-bottom: 30px;

			}
		</style>
	</head>
	<body>
		<div id="addtableone">
			<!-- 			<el-row>
			  <el-col :span="24"><div class="grid-content bg-purple-dark">
			  <div class="block">
			    <span class="demonstration"> 登记表类型</span>
			    <el-cascader
			      v-model="value"
			      :options="options"
			      @change="handleChange"></el-cascader>
			  </div>
			  </div></el-col>
			</el-row> -->
			<el-row id="header">
				<el-col :span="12">
					<div class="grid-content bg-purple" id="left">
						<h3>科研项目管理</h3>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light" id="right" style=" padding-right: 80px;">
						<el-button type="primary" @click="fanHui">返回</el-button>
					</div>
				</el-col>
				<hr id="hr1" />
			</el-row>
			<el-row style="padding-left: 40px;">
				<!-- 表单子属性有el-form-item,el-row(多个el-form-item)同级别,可自行删除不需要的-->
				<!-- 短框200px,长框300px,el-form-item width -->
				<!-- 选择框或输入框 label用于显示, value 与 VUE中对应属性绑定 -->
				<!--正则 el-form-item prop="值"  值和rules 中的规则对象绑定-->
				<!--最后的验证函数已经注释可正常提交 ,若想使用查看提交按钮处注释, -->
				<!-- 	刊物级别,和论文类型 使用v-for,其他的是固定的 -->
				<!-- 出版时间和现在时间已经写好可直接使用,onsubmit函数中 -->
				<!--证明材料未设置必须提交,也未绑定table中的值 掌握文件上传后才自行设置-->
				<!--提交后表单信息归零函数未设置,后期自行设置-->
				<el-form :model="form" :rules="rules" ref="form" label-width="80px" class="demo-ruleForm" name>
					<el-form-item label="登记类型" style="width: 300px;" prop="region">
						<el-input v-model="form.region" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="填报人" style="width: 200px" prop="name">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-row>
						<el-col :span="6">
							<el-form-item label="项目名称" style="width: 250px;" prop="keyan">
								<el-input v-model="form.keyan"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="主持人" style="width: 250px;" prop="zhuchi">
								<el-input v-model="form.zhuchi"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="参加人数" style="width:250px" prop="people">
								<el-input v-model.number="form.people"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="本人排名" style="width: 250px" prop="score">
								<el-input v-model.number="form.score"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="出版日期" style="width: 250px" prop="chubandate">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.chubandate"
									value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="立项单位" style="width: 250px;" prop="danwei">
								<el-input v-model="form.danwei"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="获批经费" style="width:250px" prop="huopijingfei">
								<el-input v-model.number="form.huopijingfei"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="到账经费" style="width:250px" prop="daozhangjingfei">
								<el-input v-model.number="form.daozhangjingfei"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="证明材料" style="width: 100%;">

						<el-upload class="upload-demo" drag action="" style="width: 50%;" ref="upload"
							:before-upload="beforeadd" :on-preview="handlePreview" :on-remove="handleRemove"
							:file-list="form.fileList" :auto-upload="false" accept=".pdf,.jpg,.png">
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" v-model="form.desc"></el-input>
					</el-form-item>
					<!--  提交栏 -->
					<el-form-item>
						<el-button type="primary" @click="onsubmit(),open()">确认修改</el-button>
						<!-- 								<el-button type="primary" @click="submitForm('form'),onsubmit()" >添加信息</el-button> -->
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
				<!-- </el-col> -->
			</el-row>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addtableone',
				data: {
					form: {
						name: '',
						region: '科研项目登记表',
						keyan: '',
						zhuchi: '',
						people: '',
						score: '',
						chubandate: '',
						danwei:'',
						huopijingfei:'',
						daozhangjingfei: '',
						fileList: [{
							name: 'food.jpeg',
							url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
						}, {
							name: 'food2.jpeg',
							url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
						}],
						desc:'',
					},
					
					rules: {
						name: [{
							required: true,
							message: '请输入填报人',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 20,
							message: '长度在 1 到 20 个字符',
							trigger: 'blur'
						}],
						region: [{
							required: true
						}],
						zhuchi: [{
							required: true,
							message: '请输入主持人',
							trigger: 'blur'
						}],
						keyan: [{
							required: true,
							min: 1,
							message: '长度至少1的字符',
							trigger: 'blur'
						}],
						people: [{
							required: false,
							type: 'number',
							message: '参加人数必须为数字值',
							trigger: 'blur'
						}],
						score: [{
							required: true,
							type: 'number',
							message: '本人排名必须为数字值',
							trigger: 'blur'
						}],
						chubandate: [{
							type: 'string',
							required: true,
							message: '请选择日期',
							trigger: 'change'
						}],
						danwei: [{
							required: true,
							message: '请输入立项单位',
							trigger: 'blur'
						}],
						huopijingfei: [{
							required: true,
							type: 'number',
							message: '获批经费必须为数字值',
							trigger: 'blur'
						}],
						daozhangjingfei: [{
							required: true,
							type: 'number',
							message: '到账经费必须为数字值',
							trigger: 'blur'
						}],						
					}
				},
				//生命周期函数
				created() {

				},
				methods: {
					// 绑定提交信息按钮
					onsubmit() {
						//用于获取提交时的时间:yyyy-MM-dd HH:mm:ss
						let currentdate = this.getCurrentTime()
						console.log(currentdate)
						// 出版时间在el-date-picker 中value-format="yyyy-MM-dd"
						console.log(this.form.chubandate)
						//用与提交的数据
						console.log(this.form)
						//证明材料数据可用
						this.submitUpload()
						console.log(this.from.fileList)
					},

					//证明材料函数与证明材料的钩子函数绑定
					beforeadd(file) {
						this.form.fileList.push(file)
					},
					submitUpload() {
						this.$refs.upload.submit();
					},
					// handleRemove(file, fileList) {

					// },
					handlePreview(file) {

					},
					//检验是否提交函数,可在添加信息中取消该函数
					open() {
						this.$confirm('是否提交?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$message({
								type: 'success',
								message: '提交成功!'
							});
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消提交'
							});
						});
					},
					//检验函数 若不符合则无法提交
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								alert('submit!');
							} else {
								console.log('error submit!!');
								return false;
							}
						})
					},
					// 日期函数格式为:yyyy-MM-dd HH:mm:ss	:2022-10-2 20:32:19
					getCurrentTime() {
						let currentTime = new Date(),
							year = currentTime.getFullYear(),
							month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime
							.getMonth() + 1,
							day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
						hour = currentTime.getHours() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
						minutes = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime
							.getMinutes();
						second = currentTime.getSeconds() < 10 ? '0' + currentTime.getMinutes() : currentTime
							.getSeconds();
						currentTime = year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + second
						return currentTime
					},
					fanHui:function(){
						window.location="list.html"
					}
				}
			})
		</script>

	</body>


</html>
